<template>
  <div style="padding: 0 5px">
    <h4>{{ photoDetail.title }}</h4>
    <p>
      <span class="time"
        >发表时间: {{ photoDetail.add_time | formatDate }}</span
      >
      <span class="click">点击: {{ photoDetail.click }}</span>
    </p>
    <hr />
    <ul>
      <li v-for="(item, i) in photoArray" :key="i">
        <img :src="item.src" @click="previewImage(i)" />
      </li>
    </ul>
    <div class="detail-content" v-html="photoDetail.content"></div>
    <my-comment :artId="picId"> </my-comment>
  </div>
</template>

<script>
import Comment from '../subcomponents/Comment.vue'
import { ImagePreview } from 'vant'

export default {
  props: ['id'],
  data() {
    return {
      picId: this.$route.params.id,
      photoDetail: {}, // 图片详情描述
      photoArray: [] // 轮播图片数据
    }
  },
  created() {
    this.getPhotoDetail() // 图片详情描述
    this.getImageList() // 轮播图片数据
  },
  methods: {
    async getPhotoDetail() {
      // console.log(this.id)
      const { data } = await this.$http('/api/getimageInfo/' + this.picId)
      if (data.status !== 0) return this.$toast('请求服务器失败')
      this.photoDetail = data.message[0]
    },
    async getImageList() {
      const { data } = await this.$http('/api/getthumimages/' + this.picId)
      if (data.status !== 0) return this.$toast('请求服务器失败')
      // console.log(data)
      this.photoArray = data.message
    },
    previewImage(index) {
      ImagePreview({
        images: this.previewList, // 轮播图数据
        startPosition: index, // 图片预览起始位置索引
        onClose() {} // 关闭函数
      })
    }
  },
  components: {
    'my-comment': Comment
  },
  computed: {
    previewList() {
      return this.photoArray.map(item => {
        return item.src
      })
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
  text-align: center;
  color: #26a2ff;
  font-size: 15px;
}
p {
  overflow: hidden;
}
.time {
  float: left;
  font-size: 13px;
  color: #8f8f94;
}
.click {
  float: right;
  font-size: 13px;
  color: #8f8f94;
}
ul {
  list-style: none;
  margin: 10px 0;
  padding: 0 5px;
  overflow: hidden;
  li {
    float: left;
    width: 33.3333%;
    padding: 5px;
    box-sizing: border-box;
    img {
      width: 100%;
      box-shadow: 1px 0 8px 1px rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
